<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/*
	作为元素树的文档: 注意，此5个方法文本节点不算进去
	   1、firstElementChild        第一个子元素节点
	   2、lastElementChild        最后一个子元素节点
	   3、nextElementSibling        下一个兄弟元素节点
	   4、previousElementSibling    前一个兄弟元素节点
	   5、childElementCount        子元素节点个数量
	*/
	window.onload = function() {
		var p = document.querySelector("#div1");
		var firstChild = p.firstElementChild;
		var lastChild = p.lastElementChild;
		
		//输出2，div1一共有两个非文档子元素节点
		console.log(p.childElementCount);
		console.log(firstChild.innerHTML);
		console.log(lastChild.innerHTML);
		console.log(firstChild.nextElementSibling.innerHTML);    //我是第二个P
		console.log(lastChild.previousElementSibling.innerHTML); //我是第一个P
	}
</script>
</head>
<body>
	<div id="div1">
		<p id="p1" class="class1">我是第一个P</p>
		<p id="p2" class="class2">我是第二个P</p>
	</div>
</body>
</html>